<template>
  <div class="gray-page resident-detail-page">
    <nav-bar :title="title"></nav-bar>
    <div class="resident-detail-main page-main">
      <van-sticky class="page-scroll" :offset-top="44">
        <!-- 1：更新  2：审核  3：采集 -->
        <p class="resident-detail-time" v-if="formParams.updateTime">
          <template v-if="$route.query.queryType === '1'">上次更新时间：</template>
          <template v-if="$route.query.queryType === '2'">上次审核时间：</template>
          <template v-if="$route.query.queryType === '3'">上次采集时间：</template>
          {{ formParams.updateTime }}
        </p>
        <van-form input-align="right" :label-width="120">
          <van-collapse v-model="activeNames" :border="false">
            <van-collapse-item size="large" title="基础信息" name="1">
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.residentTypeName"
                label="人口管理类型"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.personName"
                label="姓名"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.formerName" label="曾用名" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.idTypeName"
                label="证件类型"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.idCard"
                label="证件号码"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.sexName"
                label="性别"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.nationalityName"
                label="民族"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.birthPlaceName" label="籍贯" />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.birthday" label="出生日期" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.marriageName"
                label="婚姻状况"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.politicName"
                label="政治面貌"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.edulevelName" label="学历" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.religionName"
                label="宗教信仰"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.professionTypeName"
                label="职业类别"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.profession" label="职业" />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.workPlace" label="工作单位" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.healthConditionName"
                label="健康状况"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.phone" label="联系方式" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.livingWayName"
                label="居住方式"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.regionCodeName"
                label="所住区域"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.address"
                label="现住详址"
              />
            </van-collapse-item>
            <van-collapse-item size="large" title="补充信息" name="2">
              <!--本地户籍人口、非本地户籍人口-->
              <template v-if="$route.query.residentType === '11' || $route.query.residentType === '12'">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.householdName"
                  label="户籍地"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.householdAddress"
                  label="户籍详址"
                />
              </template>
              <!--本地户籍人口-->
              <template v-if="$route.query.residentType === '11'">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.identificationName"
                  label="人户分离标识"
                />
                <van-field readonly label-class="van-cell__title_gray" v-model="formParams.houseId" label="户号" />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.householdTypeName"
                  label="户口性质"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.ownerRelationshipName"
                  label="与户主关系"
                />
                <template v-if="formParams.ownerRelationship !== '01'">
                  <van-field
                    readonly
                    label-class="van-cell__title_gray"
                    v-model="formParams.ownerIdTypeName"
                    label="户主证件类型"
                  />
                  <van-field
                    readonly
                    label-class="van-cell__title_gray"
                    v-model="formParams.ownerIdCard"
                    label="户主证件号"
                  />
                </template>
              </template>
              <!--非本地户籍人口-->
              <template v-else-if="$route.query.residentType === '12'">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.householdTypeName"
                  label="户口性质"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.flowCauseName"
                  label="流入原因"
                />
                <van-field readonly label-class="van-cell__title_gray" v-model="formParams.flowDate" label="流入日期" />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.cardTypeName"
                  label="办证类型"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.cardNumber"
                  label="办证号码"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.registerDate"
                  label="办理日期"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.expireDate"
                  label="到期日期"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.residenceTypeName"
                  label="住所类型"
                />
              </template>
              <!--境外来华停（居）留人员-->
              <template v-else-if="$route.query.residentType === '20'">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.lastName"
                  label="外文姓"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.firstName"
                  label="外文名"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.citizenshipName"
                  label="国籍（地区）"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="formParams.purposeName"
                  label="来华目的"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.arriveTime"
                  label="抵达日期"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.leaveTime"
                  label="预计离开日期"
                />
              </template>
              <van-field readonly label-class="van-cell__title_gray" required :label-width="300" :border="false">
                <template #label>
                  <span>上传照片</span>
                  <span class="van-field__label--tip">（胸部以上正脸免冠照）</span>
                </template>
              </van-field>
              <van-field
                readonly
                label-class="van-cell__title_gray"
                class="van-field__value--upload"
                input-align="left"
              >
                <template #input>
                  <van-uploader disabled>
                    <div class="van-uploader__input--yellow-small">
                      <van-image
                        width="82px"
                        height="102px"
                        fit="cover"
                        style="border-radius: 12px"
                        :src="$config.ImageURl + formParams.personImage"
                      />
                    </div>
                  </van-uploader>
                </template>
              </van-field>
            </van-collapse-item>
          </van-collapse>
          <div v-if="formParams.houseInfo.length">
            <van-tabs border>
              <van-tab
                v-for="(item, key) in formParams.houseInfo"
                :key="key"
                :title="`房屋${toChinesNum(key + 1)}`"
                :name="item.code"
              >
                <van-cell readonly title="房屋信息" size="large"></van-cell>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="所属场所"
                  v-model="item.placeName"
                ></van-field>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="楼栋名称"
                  v-model="item.buildName"
                ></van-field>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="单元名称"
                  v-model="item.unitName"
                ></van-field>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="楼层"
                  v-model="item.floorName"
                ></van-field>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="房间号"
                  v-model="item.houseName"
                ></van-field>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  label="登记类型"
                  v-model="item.residentTypeName"
                ></van-field>
                <van-field
                  v-if="item.personType === '2'"
                  readonly
                  label-class="van-cell__title_gray"
                  label="租住截至日期"
                  v-model="item.expirationData"
                />
              </van-tab>
            </van-tabs>
          </div>
          <div style="padding: 16px"></div>
        </van-form>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import Resident from '@/api/resident'
import { toChinesNum } from '@/libs/tool'
export default {
  data() {
    return {
      toChinesNum,
      title: '居民基础信息详情',
      activeNames: ['1', '2'],
      formParams: {
        houseInfo: []
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      Resident.BaseInfo.residentDetail({
        personCode: this.$route.query.personCode,
        baseType: this.$route.query.baseType,
        queryType: this.$route.query.queryType
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.formParams = { ...data[0].personInfo, houseInfo: data[0].houseInfo }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/resident/detail.less';
</style>
